<template>
  <div style="padding: 12px;">
    <timeline-slider :currentTime="currentTime" :before="2" :after="1" :period="8" @input="onTimelineSliderInput"></timeline-slider>
  </div>
</template>

<script>
import moment from 'moment';
import timelineSlider from '../components/timeline-slider';

export default {
  components: {
    timelineSlider,
  },
  data() {
    return {
      currentTime: moment().format('YYYY-MM-DD HH:mm'),
      timer: null,
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.currentTime = moment().format('YYYY-MM-DD HH:mm');
    }, 1000);
  },
  beforeDestroy() {
    this.clearTimer();
  },
  methods: {
    onTimelineSliderInput(timeRange) {
      console.log('timeline slider input => ', timeRange);
    },

    clearTimer() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
